<template>
	<view>
		    <div class="tooltip">
		      {{textContent}}
		      <span class="tooltiptext" :style="`color:${color};font-size:${fontSize};width:${width};background-color:${backgroundColor}`" >
					{{textTip}}
				</span>
		    </div>
	</view>
</template>

<script>
	export default {
		name:"tooltip",
		/**
		 * @param textContent @default ''  通过textContent 指定源文本。
		 * @param textTip @default ''  指定提示关键字
		 * @param color @default '#f4f4f4'  提示字体颜色
		 * @param backgroundColor @default '#000' 提示框的字体背景
		 * @param fontSize @default '25rpx'  提示框内字体大小
		 * @param width   @default 240rpx  提示框宽度
		 */
		props:{
			textContent:{
				type:String,
				default:''
			},
			textTip:{
				type:String,
				default:""
			},
			color:{
				type:String,
				default:"#f4f4f4"
			},
			fontSize:{
				type:String,
				default:"25rpx"
			},
			width:{
				type:String,
				default:"240rpx"
			},
			backgroundColor:{
				type:String,
				default:"#000"
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped >
	   /* 提示框样式 */
	      .tooltip {
	        position: relative;
	        display: inline-block;
	      }
	      
	      /* 提示文本样式 */
	      .tooltip .tooltiptext {
	        visibility: hidden;
	        background-color: #000;
	        text-align: center;
	        border-radius: 4px;
	        padding: 5px;
	        position: absolute;
	        z-index: 1;
	        bottom: 125%;
	        left: 50%;
	        transform: translateX(-50%);
	        opacity: 0;
	        transition: opacity 0.3s;
	      }
	      
	      /* 鼠标悬停时显示提示文本 */
	      .tooltip:hover .tooltiptext {
	        visibility: visible;
	        opacity: 1;
	      }
</style>